<template>
  <div id="coupon" style="height:100%;">
    <div class="coupontap">
      <tab custom-bar-width="70px">
        <tab-item selected @on-item-click="tabclick">未使用</tab-item>
        <tab-item @on-item-click="tabclick">已使用</tab-item>
        <tab-item @on-item-click="tabclick">已过期</tab-item>
      </tab>
    </div>
    <div class="taptag">
      <scroller class="tagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
        <div class="sliderlist" name="slist1">
          <div class="coupon-li" :class="parseInt(item.type) > 0 ? ((item.type === '1') ? 'liovertime' : 'liused') : ''" v-for="(item, iindex) in lists1" :key="iindex" @click="routeto('couponinfo', { id: item.id })">
            <div class="tkleftpanner"><span></span><span></span><span></span><span></span></div>
            <div class="tk-left">
              <p class="tkprice"><em v-if="item.type !== 'DISCOUNT'">￥</em>{{ parseFloat(item.tnum) }}<span v-if="item.type === 'DISCOUNT'">折</span></p>
              <!-- <p class="tkbefore">{{ item.tbefore }}</p> -->
              <p class="tkfrom">({{ item.tfrom }})</p>
            </div>
            <div class="tk-right">
              <div class="tktitle">{{ item.title }}</div>
              <p class="tkcount">券码：{{ item.tcode }}</p>
              <div class="tktamp">有效期至：{{ item.ttamp }}</div>
              <a class="tklink" href="javascript:;" v-if="item.isgetwx === '0'" @click.stop="getCoupon(iindex, item.cardid, item.tcode)">领取到卡包</a>
              <span class="tkoverdays">还有{{item.tdays}}天过期</span>
            </div>
            <div class="tkrightpanner"><span></span><span></span><span></span><span></span></div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="tagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom2" slot="slist2" ref="scrollerBottom2">
        <div class="sliderlist" name="slist2">
          <div class="coupon-li liused" v-for="(item, iindex) in lists2" :key="iindex">
            <div class="tkleftpanner"><span></span><span></span><span></span><span></span></div>
            <div class="tk-left">
              <p class="tkprice"><em v-if="item.type !== 'DISCOUNT'">￥</em>{{ parseFloat(item.tnum) }}<span v-if="item.type === 'DISCOUNT'">折</span></p>
              <!-- <p class="tkbefore">{{ item.tbefore }}</p> -->
              <p class="tkfrom">({{ item.tfrom }})</p>
            </div>
            <div class="tk-right">
              <div class="tktitle">{{ item.title }}</div>
              <p class="tkcount">券码：{{ item.tcode }}</p>
              <div class="tktamp">有效期至：{{ item.ttamp }}</div>
              <a class="tklink" href="javascript:;">已使用</a>
            </div>
            <div class="tkrightpanner"><span></span><span></span><span></span><span></span></div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="tagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom3" slot="slist3" ref="scrollerBottom3">
        <div class="sliderlist" name="slist3">
          <div class="coupon-li liovertime" v-for="(item, iindex) in lists3" :key="iindex">
            <div class="tkleftpanner"><span></span><span></span><span></span><span></span></div>
            <div class="tk-left">
              <p class="tkprice"><em v-if="item.type !== 'DISCOUNT'">￥</em>{{ parseFloat(item.tnum) }}<span v-if="item.type === 'DISCOUNT'">折</span></p>
              <!-- <p class="tkbefore">{{ item.tbefore }}</p> -->
              <p class="tkfrom">({{ item.tfrom }})</p>
            </div>
            <div class="tk-right">
              <div class="tktitle">{{ item.title }}</div>
              <p class="tkcount">券码：{{ item.tcode }}</p>
              <div class="tktamp">有效期至：{{ item.ttamp }}</div>
              <a class="tklink" href="javascript:;">已过期</a>
            </div>
            <div class="tkrightpanner"><span></span><span></span><span></span><span></span></div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
  import { Tab, TabItem, Badge, LoadMore, Scroller } from 'vux'

  export default {
    name: 'coupon',
    components: {
      Badge,
      Tab,
      TabItem,
      LoadMore,
      Scroller
    },
    data () {
      return {
        appid: this.getCookie('appid'),
        cardid: '',
        isupload: false,
        isshowload: false,
        loadtip: '',
        bottomCount1: 0,
        bottomCount2: 0,
        bottomCount3: 0,
        upList: [],
        lists1: [],
        lists2: [],
        lists3: []
      }
    },
    created () {
      // show usable list
      this.getList(this.bottomCount1, 'usable')
      .then((data) => {
        this.lists1.push.apply(this.lists1, data)
        if (data.length > 0) {
          this.bottomCount1 = this.lists1.length
        }
      }, () => {})
      // show used list
      this.getList(this.bottomCount2, 'used')
      .then((data) => {
        this.lists2.push.apply(this.lists2, data)
        if (data.length > 0) {
          this.bottomCount2 = this.lists2.length
        }
      }, () => {})
      // show overtime list
      this.getList(this.bottomCount3, 'overtime')
      .then((data) => {
        this.lists3.push.apply(this.lists3, data)
        if (data.length > 0) {
          this.bottomCount3 = this.lists3.length
        }
      }, () => {})
    },
    methods: {
      tabclick: function (index) {
        this.swiperItemIndex = index
        const taplist = document.querySelectorAll('.tagli')
        for (let i = 0; i < taplist.length; i++) {
          if (index === i) {
            taplist[i].style.display = 'block'
          } else {
            taplist[i].style.display = 'none'
          }
        }
      },
      getList: function (lastnumber, type) {
        return this.$axios.post(this.apidomain + '/api/coupon/getCustCoupon/' + this.getCookie('appid'), {
          pageIndex: lastnumber,
          openId: this.getCookie('openid'),
          type: type
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, 'usable')
              .then((data) => {
                this.lists1.push.apply(this.lists1, data)
                if (data.length > 0) {
                  this.bottomCount1 = this.lists1.length
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom2 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount2, 'used')
              .then((data) => {
                this.lists2.push.apply(this.lists2, data)
                if (data.length > 0) {
                  this.bottomCount2 = this.lists2.length
                }
              }, () => {})
              this.$refs.scrollerBottom2.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom3 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount3, 'overtime')
              .then((data) => {
                this.lists3.push.apply(this.lists3, data)
                if (data.length > 0) {
                  this.bottomCount3 = this.lists3.length
                }
              }, () => {})
              this.$refs.scrollerBottom3.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      getCoupon (index, cardid, tcode) {
        const timestamp = Date.parse(new Date()) / 1000
        const nonceStr = Math.random().toString(36).substr(2)
        this.getObjDetail(this.apidomain + '/api/wechat/mp/getCardApiTicket/' + this.getCookie('appid'))
        .then((data) => {
          const noncearr = [timestamp, cardid, data.data, nonceStr, tcode]
          noncearr.sort()
          const signature = this.$jssha(noncearr.join(''))
          this.$wechat.ready(() => {
            this.$wechat.addCard({
              cardList: [{
                cardId: cardid,
                cardExt: '{"code": "' + tcode + '", "timestamp": "' + timestamp + '", "nonce_str": "' + nonceStr + '", "signature": "' + signature + '"}'
              }],
              success: (res) => {
                console.log(res)
                this.data1[index].isgetwx = '1'
              },
              cancel: (error) => {
                console.log(error)
              }
            })
          })
        }, () => {})
      }
    }
  }
</script>

<style lang="less">
@import '../assets/less/coupon/list.less';
</style>
